<script lang="ts" setup>
import { ref } from "vue";
import niming from "./chacao/niming.vue";
import juming from "./chacao/juming.vue";
import zuoyongyu from "./chacao/zuoyongyu.vue";
const name = ref('head')
</script>
<template>
  匿名插槽
  <hr />
  <niming>
    <template v-slot> 我在父组件占位了 </template>
  </niming>
  具名插槽
  <hr />
  <juming>
    父组件使用了子组件中默认的匿名插槽，不能在别的地方再次使用了，#表示插槽简写
    <template v-slot:head><div>head</div></template>

    <template #foot><div>foot</div></template>
  </juming>

  作用域插槽:在子组件动态绑定参数 派发给父组件的slot去使用 ,通过#default获取
  <hr />
  <zuoyongyu>
    <template #header>header</template>
    <template #default="{ data }">
      <div>{{ data }}</div></template
    >
    <template #footer>footer</template>

  </zuoyongyu>
  动态插槽：插槽可以是一个变量名
   <juming>
    <template #[name]><div>head</div></template>
  </juming>
  <hr />
</template>
